<template>
  <div class="course-item">
    <a :href="'https://ke.qq.com/course/' + data.course_id">
      <div class="img-wrap">
        <img :src="data.course_img" :alt="data.course_name">
      </div>
      <div class="info-wrap">
        <h1 class="course-name">{{data.course_name}}</h1>
        <p class="teacher-info">
          <img :src="data.teacher_img" :alt="data.teacher_name">
          <span>{{data.teacher_name}}</span>
        </p>
        <p class="course_price">¥{{data.price}}.00</p>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  name: 'RecomCourseItem',
  props: {
    data: Object
  }
}
</script>
<style lang="scss" scoped>
.course-item {
  position: relative;
  display: flex;
  height: .8rem;
  margin-bottom: .1rem;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .img-wrap {
    width: 1.43rem;
    height: 100%;
  }
  .info-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: .05rem .1rem .05rem 1.53rem;
    box-sizing: border-box;

    .course-name {
      font-size: .14rem;
      line-height: .18rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .teacher-info {
      margin-top: .03rem;
      img {
        width: .25rem;
        height: .25rem;
        border-radius: 50%;
      }
      span {
        font-size: .12rem;
        color: #666;
        vertical-align: middle;
      }
    }
    .course_price {
      margin-top: .06rem;
      font-size: .14rem;
      font-size: #f40;
    }
  }
}
</style>